<template>
  <div class="topState">
    <szksButton type="primary" @onClick="toggleExtrudePolygon()"> 矿权盒子组件 </szksButton>
    <szksButton type="info" @onClick="toggleWallTrail()"> 旋转电子围栏 </szksButton>
    <szksButton type="success" @onClick="togglePanel()"> 侧边栏 </szksButton>
    <szksButton type="warning" @onClick="togglePopup()"> 弹出框 </szksButton>
    <szksButton type="danger" @onClick="addModel()"> 添加模型 </szksButton>
    <br />
    <szksButton type="primary" @onClick="toggleClip()"> {{ this.clip ? '结束截图' : '开始截图' }} </szksButton>
    <szksButton type="info" @onClick="getRectangle()"> 获取四至范围 </szksButton>
    <szksButton type="success" @onClick="showCircleRippleEffect()"> 水波纹圆 </szksButton>
    <szksButton type="warning" @onClick="showCircleDiffuseEffect()"> 扩散圆 </szksButton>
    <szksButton type="danger" @onClick="showCircleSpiralEffect()"> 螺旋圆 </szksButton>
    <br />
    <szksButton type="primary" @onClick="showCircleLineScanEffect()"> 光线扩散 </szksButton>
    <szksButton type="info" @onClick="addGeoJson()"> 添加geojson </szksButton>
    <szksButton type="success" @onClick="toggleVideoCalibra()"> 视频校准功能 </szksButton>
    <szksButton type="warning" @onClick="videoClip()"> 视频截图 </szksButton>
    <szksButton type="danger" @onClick="videoClip()"> 视频截图 </szksButton>
    <szksExtrudePolygon
      :visible="showExtrudePolygon"
      :positionArray="positionArray"
      :options="options"
    ></szksExtrudePolygon>
    <szksLeftFoldPanel v-show="showFoldPanel">
      <szksDecorateBox title="szksItemList">
        <szksItemList :data="currentItem" :showKeys="showKeys"></szksItemList>
      </szksDecorateBox>
      <szksDecorateBox style="margin: 5px 0" title="szksDataList">
        <szksDataList
          :dataList="dataList"
          :showKeys="showKeys"
          titleKey="fzbm"
          :pageInfo="pageInfo"
          @sizeChange="sizeChange"
          @currentChange="currentChange"
          @clickItem="clickItem"
        ></szksDataList>
      </szksDecorateBox>
      <szksDecorateBox title="el-table">
        <template>
          <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column prop="date" label="日期"> </el-table-column>
            <el-table-column prop="name" label="姓名"> </el-table-column>
            <el-table-column prop="address" label="地址"> </el-table-column>
          </el-table>
        </template>
      </szksDecorateBox>
    </szksLeftFoldPanel>
    <szksRightFoldPanel v-show="showFoldPanel">
      <szksDecorateBox title="测试框"></szksDecorateBox>
      <szksDecorateBox style="margin: 5px 0" title="测试框2"></szksDecorateBox>
      <szksDecorateBox title="测试框3"></szksDecorateBox>
    </szksRightFoldPanel>
    <szksPopup :visible="showPopup" :position="popupPosition" :options="popupOptions" force-render>
      <div class="testDiv">
        <template>
          <a-alert message="Success Tips" type="success" show-icon />
          <a-alert message="Informational Notes" type="info" show-icon />
          <a-alert message="Warning" type="warning" show-icon />
          <a-alert message="Error" type="error" show-icon />
          <a-alert message="Error" description="This is an error message about copywriting." type="error" show-icon />
        </template>
      </div>
    </szksPopup>
    <szksTopRightPanel v-if="showVideoCalibra" :options="videoOptions" @closePanel="showVideoCalibra = false">
      <szksVideoCalibra :showDate="true" :videoList="videoList" @genMockData="genMockData"> </szksVideoCalibra>
    </szksTopRightPanel>
    <szksMapToolbar :userToolbars="userToolbars"></szksMapToolbar>
  </div>
</template>

<script>
import axios from 'axios'
import { mapGetters } from 'vuex'
import html2canvas from 'html2canvas'
export default {
  name: 'ShelfIndex',
  provide() {
    return {
      Cesium: Cesium,
      Zondy: Zondy,
      vueCesium: window.component.vueCesium,
      viewer: window.component.viewer,
    }
  },
  computed: {
    ...mapGetters(['map']),
    mapReady() {
      return this.map.mapReady
    },
  },
  data() {
    return {
      showExtrudePolygon: false,
      positionArray: [
        [119.721961286132085, 31.0973045351558284],
        [119.723864184523464, 31.0943292361026806],
        [119.722447167944793, 31.0923047572236904],
        [119.708089341148622, 31.0866103750882381],
        [119.702982730483996, 31.0857166116049335],
        [119.693972594942082, 31.0811744576125868],
        [119.691106280556326, 31.0868610526235472],
        [119.692399733015975, 31.0904758857594032],
        [119.696830766906729, 31.0948150749555374],
        [119.69834301116552, 31.095433296119861],
        [119.700082228568959, 31.09550635266827],
        [119.714774485179191, 31.0929758328071628],
        [119.715999830931551, 31.0944108238624111],
        [119.720538381094386, 31.0973262617903323],
        [119.721961286132085, 31.0973045351558284],
      ],
      options: {
        name: 'extrudePolygon',
        alpha: 0.5,
        height: 0,
        extrudedHeight: 100, //拉伸到离地高度
        fill: true,
        fillColor: '#ffffff',
        outline: true,
        outlineColor: '#ff0000',
      },
      wallTrailEntity: undefined,
      showWallTrail: false,
      showFoldPanel: false,
      showPopup: false,
      popupPosition: {
        longitude: 119.721961286132085,
        latitude: 31.0973045351558284,
        height: 0,
      },
      popupOptions: {
        title: '测试title',
      },
      userToolbars: [
        {
          title: '动态剖切',
          icon: 'icon-renyipouqie',
          component: 'Cutting',
          componentType: 'Component',
          id: 'szks-dtpq-test',
          show: true,
          panel: 'TopRightPanel',
          options: {
            title: '动态剖切参数设置',
          },
        },
      ],
      g3dIndex: undefined,
      clip: false,
      heading: 0,
      pitch: 0,
      count: 0,
      timer: null,
      currentItem: {
        clbh: 'LZZAEXSD9HC237451',
        cllx: '重型自卸货车',
        clmc: '浙CC1892',
        clxh: '斯达-斯太尔牌ZZ3313N38',
        cph: '浙CC1892',
        dlwz: '浙江省 温州市 平阳县 昆阳镇 城新线 西湾风景区西北4896米',
        fzbm: '平阳交投矿业光山矿区项目部',
        gh: 'ZSFGS20220111LW',
        jcsj: '2024-01-19 09:07:10',
      },
      showKeys: {
        clbh: '车辆编号',
        cllx: '车辆类型',
        clmc: '车辆名称',
        dlwz: '地理位置',
      },
      params: {
        index: 1,
        size: 10,
      },
      dataList: [
        {
          clbh: 'LZZAEXSD9HC237451',
          cllx: '重型自卸货车',
          clmc: '浙CC1892',
          clxh: '斯达-斯太尔牌ZZ3313N38',
          cph: '浙CC1892',
          dlwz: '浙江省 温州市 平阳县 昆阳镇 城新线 西湾风景区西北4896米',
          fzbm: '平阳交投矿业光山矿区项目部',
          gh: 'ZSFGS20220111LW',
          jcsj: '2024-01-19 09:07:10',
        },
        {
          clbh: 'LZZAEXSD9HC237451',
          cllx: '重型自卸货车',
          clmc: '浙CC1892',
          clxh: '斯达-斯太尔牌ZZ3313N38',
          cph: '浙CC1892',
          dlwz: '浙江省 温州市 平阳县 昆阳镇 城新线 西湾风景区西北4896米',
          fzbm: '平阳交投矿业光山矿区项目部',
          gh: 'ZSFGS20220111LW',
          jcsj: '2024-01-19 09:07:10',
        },
        {
          clbh: 'LZZAEXSD9HC237451',
          cllx: '重型自卸货车',
          clmc: '浙CC1892',
          clxh: '斯达-斯太尔牌ZZ3313N38',
          cph: '浙CC1892',
          dlwz: '浙江省 温州市 平阳县 昆阳镇 城新线 西湾风景区西北4896米',
          fzbm: '平阳交投矿业光山矿区项目部',
          gh: 'ZSFGS20220111LW',
          jcsj: '2024-01-19 09:07:10',
        },
      ],
      pageInfo: {
        total: 2,
        'page-sizes': [1, 2],
        'page-size': 1,
        'prev-text': '<',
        'next-text': '>',
      },
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
      ],
      Effects: null,
      showVideoCalibra: false,
      videoOptions: {
        title: '视频校准',
      },
      videoList: [
        {
          videoSource: {
            protocol: 'mp4', // 视频传输协议
            videoUrl: 'http://webclient.smaryun.com:8200/NoneSpatialData/video/zondy_garden.mp4',
          },
          videoID: 'zondy_garden',
          videoName: '中地花园',
          position: [114.40164113946422, 30.466590219808978],
        },
        {
          videoSource: {
            protocol: 'mp4',
            videoUrl:
              'http://13.11.100.22:8888/onemap/zrzy-om-docmanage/client/download?id=65445c898e50fd3a3467536c&dburl=mongodb://gtkj:gtkj@13.11.100.22:27017/gtkj&fullfilename=uav存储_大姚新街乡页岩砖厂.mp4',
          },
          videoID: 'dyzc',
          videoName: '存储_大姚新街乡页岩砖厂',
          position: [101.2737, 25.7808],
        },
      ],
      mockDataList: null,
    }
  },

  mounted() {
    window.component.viewer.scene.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(119.691106280556326, 31.0868610526235472, 2218),
      orientation: {
        heading: 0, // east, default value is 0.0 (north)
        pitch: -90, // default value (-90 从上到下，0 水平)
        roll: 0, // default value
      },
    })
    this.videoList.forEach((ele, index) => {
      axios.get(`./static/mockData/${ele.videoID}.json`).then(res => {
        this.videoList[index] = { ...this.videoList[index], ...res.data }
      })
    })
  },

  methods: {
    toggleExtrudePolygon() {
      this.showExtrudePolygon = !this.showExtrudePolygon
    },
    toggleWallTrail() {
      this.showWallTrail = !this.showWallTrail
      const multiPointArr = [
        119.721961286132085, 31.0973045351558284, 300, 119.723864184523464, 31.0943292361026806, 300,
        119.722447167944793, 31.0923047572236904, 300, 119.708089341148622, 31.0866103750882381, 300,
        119.702982730483996, 31.0857166116049335, 300, 119.693972594942082, 31.0811744576125868, 300,
        119.691106280556326, 31.0868610526235472, 300, 119.692399733015975, 31.0904758857594032, 300,
        119.696830766906729, 31.0948150749555374, 300, 119.69834301116552, 31.095433296119861, 300, 119.700082228568959,
        31.09550635266827, 300, 119.714774485179191, 31.0929758328071628, 300, 119.715999830931551, 31.0944108238624111,
        300, 119.720538381094386, 31.0973262617903323, 300, 119.721961286132085, 31.0973045351558284, 300,
      ]
      if (this.showWallTrail) {
        if (this.wallTrailEntity) {
          this.wallTrailEntity.remove()
        }
        this.wallTrailEntity = new this.$map3DUtils.WallTrail(
          multiPointArr,
          'dzwl',
          '#0000ff',
          2000,
          './static/images/edge.png',
          window.component.viewer,
          Cesium,
        )
        this.wallTrailEntity.init()
      } else {
        if (this.wallTrailEntity) {
          this.wallTrailEntity.remove()
        }
      }
    },
    togglePanel() {
      this.showFoldPanel = !this.showFoldPanel
    },
    togglePopup() {
      this.showPopup = !this.showPopup
    },
    addModel() {
      // this.setGlobleMap(false)
      const viewer = window.component.viewer
      // 加载倾斜摄影
      viewer.scene.layers.appendM3DLayer(`http://115.223.34.32:8865/igs/rest/services/光山倾斜摄影/M3dServer`, {
        name: 'qxsy',
        duration: 2,
        autoReset: true, // 自动定位
        loaded: function () {
          viewer.scene.light.intensity = 16 // 处理比较暗的倾斜摄影
        },
      })
      // this.showPosition(viewer)
      // console.log('G3DManager', viewer.scene.layers)
      // if (this.g3dIndex) {
      //   window.webGlobe.scene.layers.removeG3DLayerByID(this.g3dIndex)
      //   this.g3dIndex = undefined
      // }
      // this.g3dIndex = viewer.scene.layers.appendG3DLayer(
      //   `http://13.11.100.22:6163/igs/rest/g3d/大姚县新街页岩砖厂2022`,
      //   {
      //     name: 'csmx',
      //     duration: 2,
      //     autoReset: true, // 自动定位
      //   },
      // )
    },
    showPosition(viewer) {
      var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)

      var elementbottom = document.createElement('div')
      document.getElementsByClassName('cesium-viewer')[0].append(elementbottom)
      elementbottom.id = 'mapfootBottom'
      elementbottom.className = 'mapfootBottom'
      var coordinatesDiv = document.getElementById('cesium_coordinates')
      if (coordinatesDiv) {
        coordinatesDiv.style.display = 'block'
      } else {
        coordinatesDiv = document.createElement('div')
        coordinatesDiv.id = 'cesium_coordinates'
        coordinatesDiv.className = 'map3D-coordinates'
        coordinatesDiv.innerHTML = '暂无坐标信息'
        coordinatesDiv.style.display = 'block'
        coordinatesDiv.style.position = 'absolute'
        coordinatesDiv.style.bottom = '10px'
        coordinatesDiv.style.left = '30px'
        coordinatesDiv.style.fontSize = '20px'
        coordinatesDiv.style.color = '#fff'
        document.getElementById('mapfootBottom')?.appendChild(coordinatesDiv)
      }
      const mouseOverHandler = function (movement) {
        //得到当前三维场景的椭球体
        var ellipsoid = viewer.scene.globe.ellipsoid
        var cartesian = viewer.scene.camera.pickEllipsoid(movement.endPosition, ellipsoid)
        if (cartesian) {
          // 将笛卡尔坐标转换为地理坐标
          // var cartographic = ellipsoid.cartesianToCartographic(cartesian)
          //将弧度转为度的十进制度表示
          // var longitude = Cesium.Math.toDegrees(cartographic.longitude)
          // var latitude = Cesium.Math.toDegrees(cartographic.latitude)
          //获取高度
          var height = Math.ceil(viewer.scene.camera.positionCartographic.height)

          var viewLong = Cesium.Math.toDegrees(viewer.scene.camera._positionCartographic.longitude)
          var viewLat = Cesium.Math.toDegrees(viewer.scene.camera._positionCartographic.latitude)
          // var viewHeight = Cesium.Math.toDegrees(viewer.scene.camera._positionCartographic.height)
          // console.log(viewLong, ',', viewLat, ',', height)
          //俯仰角
          var pitch = Number(viewer.scene.camera.pitch).toFixed(2)
          //方向
          var heading = Number(viewer.scene.camera.heading).toFixed(2)
          //旋转角度
          var roll = Number(viewer.scene.camera.roll).toFixed(2)

          let coordinatesDiv = document.getElementById('cesium_coordinates')
          if (coordinatesDiv) {
            coordinatesDiv.innerHTML = ` view${viewLong},${viewLat},${height} pitch${pitch} heading${heading} roll${roll}`
          }
        }
      }
      handler.setInputAction(mouseOverHandler, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
    },
    toggleClip() {
      this.clip = !this.clip
      if (this.clip) {
        this.startClip()
      } else {
        this.stopClip()
      }
    },
    stopClip() {
      clearInterval(this.timer)
      this.timer = null
    },
    startClip() {
      this.timer = setInterval(() => {
        this.setUserView()
      }, 3000)
    },
    setUserView() {
      window.component.viewer.scene.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(120.58769025715543, 27.666411561920086, 918),
        orientation: {
          heading: this.heading, // east, default value is 0.0 (north)
          pitch: this.pitch, // default value (-90 从上到下，0 水平)
          roll: 0, // default value
        },
      })
      window.component.viewer.render()
      let res = Cesium.ReImg.fromCanvas(window.component.viewer.canvas)
      res.downloadPng()
      if (this.count > 30) {
        // 结束截图
        clearInterval(this.timer)
        this.timer = null
      }
      if (this.pitch < -6.3) {
        this.pitch = 0
        this.count++
      }
      if (this.heading < 6) {
        this.heading += 0.3
      } else {
        this.heading = 0
        this.pitch -= 0.2
      }
    },
    setGlobleMap(bool) {
      const viewer = window.component.viewer
      viewer.scene.sun.show = bool // 关闭太阳
      viewer.scene.moon.show = bool // 关闭月亮
      viewer.scene.skyBox.show = bool // 关闭天空盒
      viewer.scene.globe.showGroundAtmosphere = bool // 关闭地表大气层
      viewer.scene.skyAtmosphere.show = bool // 关闭天空大气层
      viewer.scene.globe.show = bool // 不显示地球
    },
    getRectangle() {
      const rect = window.component.viewer.camera.computeViewRectangle()
      const rect2 = this.getCurrentExtent()
      console.log('rectangle', rect, rect2)
    },
    getCurrentExtent() {
      // 范围对象
      var extent = {}
      const viewer = window.component.viewer

      // 得到当前三维场景
      var scene = viewer.scene

      // 得到当前三维场景的椭球体
      var ellipsoid = scene.globe.ellipsoid
      var canvas = scene.canvas

      // canvas左上角
      var car3_lt = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(0, 0), ellipsoid)

      // canvas右下角
      var car3_rb = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(canvas.width, canvas.height), ellipsoid)

      // 当canvas左上角和右下角全部在椭球体上
      if (car3_lt && car3_rb) {
        var carto_lt = ellipsoid.cartesianToCartographic(car3_lt)
        var carto_rb = ellipsoid.cartesianToCartographic(car3_rb)
        extent.xmin = Cesium.Math.toDegrees(carto_lt.longitude)
        extent.ymax = Cesium.Math.toDegrees(carto_lt.latitude)
        extent.xmax = Cesium.Math.toDegrees(carto_rb.longitude)
        extent.ymin = Cesium.Math.toDegrees(carto_rb.latitude)
      }

      // 当canvas左上角不在但右下角在椭球体上
      else if (!car3_lt && car3_rb) {
        var car3_lt2 = null
        var yIndex = 0
        do {
          // 这里每次10像素递加，一是10像素相差不大，二是为了提高程序运行效率
          yIndex <= canvas.height ? (yIndex += 10) : canvas.height
          car3_lt2 = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(0, yIndex), ellipsoid)
        } while (!car3_lt2)
        var carto_lt2 = ellipsoid.cartesianToCartographic(car3_lt2)
        var carto_rb2 = ellipsoid.cartesianToCartographic(car3_rb)
        extent.xmin = Cesium.Math.toDegrees(carto_lt2.longitude)
        extent.ymax = Cesium.Math.toDegrees(carto_lt2.latitude)
        extent.xmax = Cesium.Math.toDegrees(carto_rb2.longitude)
        extent.ymin = Cesium.Math.toDegrees(carto_rb2.latitude)
      }

      // 获取高度
      extent.height = Math.ceil(viewer.camera.positionCartographic.height)
      return extent
    },
    sizeChange(pageSize) {
      this.params.size = pageSize
    },
    currentChange(currentPage) {
      this.params.index = currentPage
    },
    clickItem(list) {
      console.log('list', list)
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    showCircleRippleEffect() {
      this.removeEffect()
      this.Effects = new this.$map3DUtils.CircleRipple(
        window.component.viewer,
        [119.691106280556326, 31.0868610526235472],
        'CircleRipple',
        { radius: 500, color: '#00ff00', speed: 12, count: 4, gradient: 0.2 },
      )
      this.Effects.init()
    },
    showCircleDiffuseEffect() {
      this.removeEffect()
      this.Effects = new this.$map3DUtils.CircleDiffuse(
        window.component.viewer,
        [119.691106280556326, 31.0868610526235472],
        'CircleDiffuse',
        {
          radius: 500,
          color: '#00ff00',
          speed: 12,
        },
      )
      this.Effects.init()
    },
    showCircleSpiralEffect() {
      this.removeEffect()
      this.Effects = new this.$map3DUtils.CircleSpiral(
        window.component.viewer,
        [119.691106280556326, 31.0868610526235472],
        'CircleDiffuse',
        {
          radius: 500,
          color: '#00ff00',
          speed: 12,
        },
      )
      this.Effects.init()
    },
    showCircleLineScanEffect() {
      this.removeEffect()
      this.Effects = new this.$map3DUtils.CircleLineScan(
        window.component.viewer,
        [119.691106280556326, 31.0868610526235472],
        'CircleDiffuse',
        {
          radius: 500,
          color: '#00ff00',
          speed: 12,
        },
      )
      this.Effects.init()
    },
    removeEffect() {
      if (this.Effects) {
        this.Effects.remove()
      }
    },
    addGeoJson() {
      this.$map3DUtils.addGeoJsonEntity('./static/geoJson/kqfw.json', {
        key: 'lakqfw',
        type: 'LineString',
        fillPolygon: true,
        polyLine: true,
        polylineColor: '#ff0000',
        polylineWidth: 4,
      })

      this.$map3DUtils.addGeoJsonEntity('./static/geoJson/dbsst.json', {
        key: 'sst',
        type: 'Polygon',
        propertyKey: 'name',
        fillPolygon: true,
        fillColor: {
          较大风险区: '#fa8f39',
          一般风险区: '#ffff00',
          低风险区: '#43bdf6',
        },
        polyLine: true,
        polylineColor: {
          低风险区: '#00aeff',
          一般风险区: '#fff600',
          较大风险区: '#fa8f39',
        },
        alpha: 0.5,
      })
    },
    toggleVideoCalibra() {
      this.showVideoCalibra = !this.showVideoCalibra
    },

    getNowDate() {
      var date = new Date()
      var year = date.getFullYear() // 年
      var month = date.getMonth() + 1 // 月
      var day = date.getDate() // 日
      var hour = date.getHours() // 时
      var minutes = date.getMinutes() // 分
      var seconds = date.getSeconds() //秒
      var weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      var week = weekArr[date.getDay()]
      // 给一位数数据前面加 “0”
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (day >= 0 && day <= 9) {
        day = '0' + day
      }
      if (hour >= 0 && hour <= 9) {
        hour = '0' + hour
      }
      if (minutes >= 0 && minutes <= 9) {
        minutes = '0' + minutes
      }
      if (seconds >= 0 && seconds <= 9) {
        seconds = '0' + seconds
      }

      const currentDate = year + '年' + month + '月' + day + '日' + ' ' + week
      return currentDate
    },

    genMockData(mockData, id) {
      console.log('生成的校准数据:', mockData)
      // 创建Blob对象
      const blob = new Blob([JSON.stringify(mockData)], { type: 'application/json' })

      // 创建下载链接并模拟点击下载
      const url = URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = `${id}.json`
      link.click()

      // 释放URL对象
      URL.revokeObjectURL(url)
    },
    videoClip() {
      html2canvas(document.getElementById('szks-videoCalibra-date-video'), {
        backgroundColor: null,
        useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
      }).then(canvas => {
        let url = canvas.toDataURL('image/png')
        // this.src = url
        // 创建下载链接并模拟点击下载
        const link = document.createElement('a')
        link.href = url
        link.download = `截图.png`
        link.click()

        // 释放URL对象
        URL.revokeObjectURL(url)
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.topState {
  z-index: 3;
  position: absolute;
  top: calc(#{$headerHeight} + 10px);
  width: 100%;
  .szks-button {
    margin-right: 10px;
  }
  .panelContent {
    height: 100%;
    background: linear-gradient(
      180deg,
      rgba($color: $linearStart, $alpha: 0.8),
      rgba($color: $linearEnd, $alpha: 0.85)
    );
  }
}
</style>
<style lang="scss">
.szks-LeftFoldPanel,
.szks-RightFoldPanel {
  top: 0px !important;
}
</style>
